
class TabbarControl extends React.Component {

    constructor(props) {
        super(props)
        this.titles = ["流行", "新歌", "精选"]
        this.onSelectTab = this.onSelectTab.bind(this)
        this.state = {
            pageContent: "流行"
        }
    }

    render() {
        return (
            <div>
                <Tabbar titles={this.titles} onSelectTab={this.onSelectTab}></Tabbar>
                <Page content={this.state.pageContent} />
            </div>
        )
    }

    onSelectTab(contant) {
        console.log(contant)
        this.setState({
            pageContent: contant
        })
    }
}

class Tabbar extends React.Component {
    constructor(props) {
        super(props)
        this.onSelectItem = this.onSelectItem.bind(this)
        this.state = {
            currentIndex: 0
        }
    }

    render() {
        const { titles } = this.props
        const { currentIndex } = this.state;
        return (
            <div className="tab-control">
                {
                    titles.map((value, index) => {
                        return (
                            <div className="tab-item" key={index}>
                                <div onClick={(e) => { this.onSelectItem(index, value, e) }}>{value}</div>
                                <span className={"title" + (index === currentIndex ? " active" : "")}></span>
                            </div>
                        )
                    })
                }
            </div>
        )
    }

    onSelectItem(index, value, e) {
        this.setState({
            currentIndex: index
        });
        this.props.onSelectTab(value)
    }
}

class Page extends React.Component {
    render() {
        const { content } = this.props
        return (
            <h1>{content}</h1>
        )
    }
}

let rootContainer = document.getElementById("root")
ReactDOM.render(
    <TabbarControl></TabbarControl>,
    rootContainer
)